<template lang="html">
  <div id="recordcontent">
  	<div class='recordcontent-box'>
  		<div v-for='(item,index) in symptom' :key='index' class='box-content' @click='BoxHander(item)'>
        <div :class='[item.flag ? "box-block" : "box-hollow"]'></div>
  			<a class='recordcontent-box-text'>{{ item.name }}</a>
  		</div>
	  </div>
    
  </div>
</template>

<script>
export default {
  name:'RecordContent',
  data(){
    return{
      quanbu:[]
    }
  },
  props:{
  	symptom:{
  		type:Array,
  		default:function(){
  			return []
  		}
  	}
  },
  methods:{
    BoxHander(item){
      if(item.flag == true){
        item.flag = false 
        for(var i=0 ; i< this.quanbu.length; i++){
          if(this.quanbu[i].name == item.name){
            return
           }       
        }
        this.quanbu.push(item)
      }else{
        item.flag = true
        let shanchu = this.quanbu.pop(item)
      }
    }
  }
}
</script>

<style lang='less' scoped>
#recordcontent{
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #f1f1f1;
  padding:0 10%;
  .recordcontent-box{
  	width: 80%;
  	float: left;
  	.box-content{
  		height: 0.6rem;
  		line-height:0.6rem;
  		width: 50%;
  		float: left;
  		.box-block{
  			width: 0.3rem;
  			height: 0.3rem;
  			float: left;
  			border:1px solid #717171;
  			border-radius: 5px;
  			margin:0.14rem;
  		}
      .box-hollow{
        width: 0.3rem;
        height: 0.3rem;
        float: left;
        background: #717171;
        border:1px solid #717171;
        border-radius: 5px;
        margin:0.14rem;
      }
  		.recordcontent-box-text{
  			border:1px solid #717171;
  			border-radius: 0.3rem;
  			padding:0.07rem;
  		}
  	}
  }
}
</style>
<style>
.{
	border-radius: ;
}
</style>